<template>
    <div class="playlist-detail">
        <div class="pic">
            <van-icon name="arrow-left" @click="goback" />
            <van-image
                fit="cover"
                :src="picUrl"
            />
        </div>
        <div class="play">
            <div v-if="songId==''">
                <span>播放全部</span>
            </div>
            <div v-else>
            <audio :src="songUrl" controls autoplay></audio>
        </div>
        </div>
        
        <div class="song-list">
            <ul>
                <li v-for="item in songList" :key="item.songid" 
                    @click="playSong(item)">
                    <h4>{{item.songname}}</h4>
                    <span>{{item.singer[0].name}}-{{item.albumname}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            songList: [],
            picUrl: "",
            songId: "",
            songUrl: ""
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            axios.get("/api/songlist",{
                params:{
                    id: this.$route.params.id
                }
            })
            .then(res => {
                console.log(res.data.data)
                this.songList = res.data.data.songlist
                this.picUrl = res.data.data.logo
            })
            .catch(err => {
                console.error(err); 
            })
        },
        goback(){
            this.$router.go(-1)
        },
        playSong(item){
            this.songId = item.songid
            axios.get("/jsososo/song/urls",{
                params:{
                    id: item.songmid
                }
            })
            .then(res => {
                console.log(res.data)
                this.songUrl = res.data.data[item.songmid]
            })
            .catch(err => {
                console.error(err); 
            })
        }
    }
}
</script>
<style scoped>
.pic{
    height: 15rem;
}
.van-image{
    width: 100%;
    height: 15rem;
}
.van-icon{
    font-size: 2rem;
    position: absolute;
    top: 1rem;
    left: 0;
    z-index: 100;
    color: white;
}
</style>